<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Custom Slap Toggle MI</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
<div class="container">
<form class="toggle">
<input type="radio" id="choice1" name="choice" value="creative">
<label for="choice1">Frontend</label>
<input type="radio" id="choice2" name="choice" value="productive">
<label for="choice2">Backend</label>
<div id="flap"><span class="content">productive</span></div>
</form>
</div>
<script>
const st = {};
st.flap = document.querySelector('#flap');
st.toggle = document.querySelector('.toggle');
st.choice1 = document.querySelector('#choice1');
st.choice2 = document.querySelector('#choice2');
st.flap.addEventListener('transitionend', () => {
if (st.choice1.checked) {
st.toggle.style.transform = 'rotateY(-15deg)';
setTimeout(() => st.toggle.style.transform = '', 400);
} else {
st.toggle.style.transform = 'rotateY(15deg)';
setTimeout(() => st.toggle.style.transform = '', 400);
}
})
st.clickHandler = (e) => {
if (e.target.tagName === 'LABEL') {
setTimeout(() => {
st.flap.children[0].textContent = e.target.textContent;
}, 250);
}
}
document.addEventListener('DOMContentLoaded', () => {
st.flap.children[0].textContent = st.choice2.nextElementSibling.textContent;
});
document.addEventListener('click', (e) => st.clickHandler(e));
</script>
</body>
</html>